<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<link rel="stylesheet" type="text/css" href="css/main02.css">
	</head>

	<body>
		<div class="set_con">
			<div class="left_set">
				<label>姓名：</label>
				<input type="text" id="input01">
				<label>职位：</label>
				<input type="text" id="input02">
				<label>公司名称：</label>
				<input type="text" id="input03">
				<label>手机：</label>
				<input type="text" id="input04">
				<label>email：</label>
				<input type="text" id="input05">
				<label>地址：</label>
				<input type="text" id="input06">
				<label>风格：</label>
				<!--
            	通过select的value值去判断哪个风格
            -->
				<select id="input07">
					<option value="0">风格一</option>
					<option value="1">风格二</option>
					<option value="2">风格三</option>
				</select>
				<input type="button" value="设 置" class="setbtn" id="setcard">
			</div>
			<div class="right_show">
				<!--
        		风格切换，就是切换类名：
        		idcard01   代表风格1的样式
        		idcard02   代表风格2的样式
        		idcard03   代表风格3的样式
        	-->
				<div class="idcard01" id="card_wrap">
					<div class="p01">张小山<em>产品经理</em></div>
					<div class="p02">
						<p class="company">银河科技信息技术有限公司</p>
						<p>手机：1808888888</p>
						<p>email：dasan@126.com</p>
						<p>地址：中关村银河大厦B座2603</p>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 姓名
		var oInput01 = document.getElementById("input01")
		// 职位
		var oInput02 = document.getElementById("input02")
		// 公司名称
		var oInput03 = document.getElementById("input03")
		// 手机：
		var oInput04 = document.getElementById("input04")
		// email：
		var oInput05 = document.getElementById("input05")
		// 地址
		var oInput06 = document.getElementById("input06")
		// 风格
		var oInput07 = document.getElementById("input07")
		// 设置
		var oSetCard = document.getElementById("setcard")
		// 右边的名片
		var oCardWrap = document.getElementById("card_wrap")

		oSetCard.onclick = function() {
			//	 		alert(oInput01.value) 
			oCardWrap.innerHTML = '<div class="p01">' + oInput01.value + '<em>' + oInput02.value + '</em></div>' +
				'<div class="p02">' +
				'<p class="company">' + oInput03.value + '</p>' +
				'<p>手机：' + oInput04.value + '</p>' +
				'<p>email：' + oInput05.value + '</p>' +
				'<p>地址：' + oInput06.value + '</p>' +
				'</div>'

			if(oInput07.value == 0) {
				oCardWrap.className = 'idcard01'
			} else if(oInput07.value == 1) {
				oCardWrap.className = 'idcard02'
			} else {
				oCardWrap.className = 'idcard03'
			}
		}
	</script>

</html>